<template>
  <view class="commentList">
    <view class="evaluateList">
      <view class="evaluateItem" v-for="(item, index) in list" :key="index">
        <view class="head">
          <view class="user">
            <view class="user-avatar">
              <image :src="item.avatar_url"></image>
            </view>
            <view class="user-name">
              <view class="name">{{ item.nickname }}</view>
              <view class="starList">
                <i
                  class="iconfont icon-collection-fill"
                  v-for="item in item.score - 0"
                  :key="item"
                ></i>
              </view>
            </view>
          </view>
        </view>
        <view class="content">
          <view class="evaluateContent">{{ item.content }}</view>
          <view class="picList" v-if="item.pic_list && item.pic_list.length">
            <view
              class="picItem pic-box"
              v-for="(pic, picIndex) in item.pic_list"
              :key="picIndex"
            >
              <image
                :src="pic"
                alt=""
                @click.stop="preview(picIndex, item.pic_list)"
              />
            </view>
          </view>
          <view class="skuList" v-if="item.attr && item.attr.length">
            <text v-for="(sku, skuIndex) in item.attr" :key="skuIndex"
              >{{ sku.attr_group_name }}{{ sku.attr_name
              }}{{ skuIndex == item.attr.length - 1 ? "" : "，" }}</text
            >
          </view>
          <view
            v-if="item.reply_content"
            style="
              background: #f0f0f0;
              padding: 20rpx;
              font-size: 24rpx;
              border-radius: 14rpx;
              color: #000000;
            "
          >
            <text style="color: #ff6247">{{ $t("goods.reply") }}：</text
            >{{ item.reply_content }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {},
  methods: {
    // 点击评价图片预览图片
    preview(index, list) {
      uni.previewImage({
        current: index,
        urls: list,
        success(res) {
          uni.setStorageSync("usePreviewImgApi", "true");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.evaluateList {
  padding: 0 4.8vw;
  background-color: #fff;
}
.evaluateItem {
  border-bottom: 1px solid #f2f2f2;
  font-family: PingFang SC;
  padding: 4.8vw 0 3.2vw;
  border-bottom: 1px solid #f6f6f6;
  .head {
    display: flex;
    align-items: center;
    .user {
      display: flex;
      align-items: center;
      .user-avatar {
        width: 7.73vw;
        height: 7.73vw;
        image {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 50%;
        }
      }

      .user-name {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 1.6vw;
        .name {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
        }
        .starList {
          display: flex;
          align-items: center;
          .iconfont {
            color: #f84e18;
            margin-right: 1.067vw;
            font-size: 30rpx;
          }
        }
      }
    }
  }
  .content {
    padding-top: 1.86vw;

    .evaluateContent {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 32rpx;
      color: #262626;
      word-break: break-all;
    }
    .picList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 2.67vw;
      .picItem {
        width: 22.13vw;
        height: 22.13vw;
        margin-right: 4rpx;
        margin-bottom: 4rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 1.6vw;
        }
      }
      .picitem:nth-child(4n + 4) {
        margin-right: 0;
      }
      .pic-box:nth-child(4n + 4) {
        margin-right: 0;
      }
    }
    .skuList {
      margin-top: 3.2vw;
      display: flex;
      align-items: center;
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 32rpx;
      color: #8c8c8c;
    }
  }
}
.evaluateItem:last-child {
  border-bottom: 0 none;
}
</style>